<template>
  <el-drawer
    title="新增"
    :visible.sync="drawer"
    direction="rtl"
    :before-close="close"
    size="1000px"
  >
    <div class="bock" v-loading="loading">
      <el-form
        ref="Form"
        :model="form_data"
        size="mini"
        label-position="right"
        label-width="100px"
        :rules="rules"
      >
        <el-col :span="24">
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="form_data.title"
              placeholder="请输入标题"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="类型" prop="type">
            <el-cascader
              v-model="form_data.type"
              :options="typeArr"
              placeholder="请选择类型"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="导语" prop="introduction">
            <el-input
              v-model="form_data.introduction"
              placeholder="请输入导语"
              type="textarea"
              axlength="256"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="是否置顶" prop="topUp">
            <el-radio-group v-model="form_data.topUp">
              <el-radio :label="3">是</el-radio>
              <el-radio :label="6">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        
        <el-col :span="8">
          <el-form-item label="是否轮播" prop="carousel">
            <el-radio-group v-model="form_data.carousel">
              <el-radio :label="3">是</el-radio>
              <el-radio :label="6">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传附件" prop="imgUrl">
            <Upload
              :limit="2"
              :lableName="'authorizationLetter'"
              @upload="receiveFile"
              :imgUrl="form_data.imgUrl"
              :listType="'text'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容" prop="content">
            <vue-editor
              v-model="form_data.content"
              style="height: 400px"
            ></vue-editor>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div class="drawerBtn">
      <el-button size="mini" @click="close">取 消</el-button>
      <el-button size="mini" type="primary" @click="submit">确 认</el-button>
    </div>
  </el-drawer>
</template>

<script>
import Upload from "@/components/common/upload.vue";
import { VueEditor } from "vue2-editor";
export default {
  components: { VueEditor, Upload },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: 0,
      value: [],
      show: false,
      drawer: false,
      typeArr: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
            },
            {
              value: "yizhi",
              label: "一致",
            },
            {
              value: "fankui",
              label: "反馈",
            },
            {
              value: "xiaolv",
              label: "效率",
            },
            {
              value: "kekong",
              label: "可控",
            },
          ],
        },
      ],
      form_data: {
        title: "",
        type: [],
        introduction: "",
        carousel: "",
        topUp: "",
        imgUrl: "",
        content: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        introduction: [
          { required: true, message: "请输入导语", trigger: "blur" },
        ],
        topUp: [{ required: true, message: "请选择是否置顶", trigger: "blur" }],
        content: [{ required: true, message: "请输入正文", trigger: "blur" }],
        imgUrl: [{ required: true, message: "请上传附件", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    isShow() {
      this.drawer = true;
    },

    receiveFile(data) {
      //如果设置了默认图片请注意data返回值
      //data返回值是一个数组，数组中如果设置了默认值data返回的数据会存在对象和文件流两种数据类型
      //如果数据中存在name就是一个文件流，如果没有就是设置的默认值的数据
      console.log("data", data);
    },
    submit() {
      this.$refs["Form"].validate((valid) => {
        if (valid) {
          let data = {
            MOR_BEHA_EVALUATE: this.form_data.EVALUATE,
            EVALUATION_SCORE_ID: this.data.EVALUATION_SCORE_ID,
          };
          this.loading = true;
          addEvaluate(data)
            .then((res) => {
              this.$message.success("评价成功");
              this.loading = false;
              this.$emit("submit");
              this.show = false;
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    },
    close() {
      this.drawer = false;
    },
  },
};
</script>

<style scoped>
.bock {
  padding: 0px 20px;
  /* max-height: calc(100vh - 60px); */
  overflow-y: auto;
  height: calc(100vh - 60px);
}
.drawerBtn {
  padding-left: 848px !important;
}
</style>
